// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Defines html components used to render the BITE popup.
 * @author michaelwill@google.com (Michael Williamson)
 */


{namespace bite.client.Templates.popup}


/**
 * Renders the entire page, conditionally including
 * various parts based on whether or not the user
 * is logged in.
 *
 * @param url A login or logout url.
 * @param username The username of the user.
 * @param version The version string.
 * @param consoleOptions An array of console option objects.
 *    Each object should have a name, img, and description among
 *    other things.  See popup.js for an example.
 */
{template .all}
  <div class="popup">
    {call .header data="all" /}
    {if $username }
      {call .bodyLoggedIn data="all" /}
    {/if}
  </div>
{/template}


/**
 * Displayed when an error occurs.
 * @param message Text to show the user.
 *
 */
{template .error}
  {call .logo /}
  <div class="popup-error">
    {$message|noAutoescape}
  </div>
{/template}


/**
 * Displays nothing but a loading image.
 */
{template .loading}
  <div class="popup">
    <img src="imgs/loading.gif"></img>
  </div>
{/template}


/**
 * Displays the logo image.
 */
{template .logo}
  <img src="/imgs/popup/bite-noname-tiny.png" />
{/template}


/**
 * Prints the version number in a span.
 *
 * @param version
 * @param url
 * @param username
 */
{template .header}
  <table class="header">
    <tr>
      <td class="logo">
        {call .logo /}
      </td>
        <td class="version">
        <span class="version">{$version}</span>
      </td>
      <td class="userbar">
        {if not $username}
          <div class="setting">
            <a href="{$url}" target="_blank">Sign in</a>
          </div>
        {else}
          <div class="setting">{$username}</div>
          <div class="setting">
            <a href="{$url}" target="_blank">Sign out</a>
          </div>
        {/if}
      </td>
  </table>
{/template}


/**
 * The body that appears if the user is logged in.
 * @param consoleOptions
 */
{template .bodyLoggedIn}
  <table id="body-table">
    {foreach $option in $consoleOptions}
    <tr class="menuitem-row" title="{$option.name}">
      <td class="menuitem-iconcell">
        <img src="{$option.img}" class="menuitem-icon" /></td>
      <td class="menuitem-titlecell">
        <div class="menuitem-title">
            {$option.name}
        </div>
        <div class="menuitem-notes">
            {$option.description}
        </div>
      </td>
    </tr>
    {/foreach}
  </table>
{/template}

